<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue学习笔记</title>
    <script src="../js/vue.js"></script>
</head>
<body>
 <div class="root">
    <!--v-show 的本质是display:none-->
    <!--v-if就是直接删除了，这个节点都不会出现-->
    <h2 v-show="false">条件渲染</h2>
    <h2 v-if="false">哈哈哈哈</h2>
    <!--v-for列表渲染，语法格式(item,index) in persons :key=p.id 有id就用id-->
   <!--  <ul>
        <!--:key是提供给vue底层进行使用，作为唯一标识，有id就要用id！能够避免出现很多错误-->
       <!-- <li v-for="(item,index) in persons" :key="item.id">
            {{item.name}} -{{item.age}}
       </li>
       <div></div>
    -->
       <!--案例：设置搜索框，通过搜索框获取对应的用户名称-->
       <h2>人员列表</h2>
       <input type="text" placeholder="输入搜索的用户姓名关键字" v-model="keyword">
       <ul>
        <li v-for="(item,index) in results" :key="item.id">
            {{item.name}} -{{item.age}}
        </li>
       </ul>
       <hr>
       <!--动态渲染对应的用户名中含有冬的人-->
       <ul>
        <li v-for="(item,index) in persons" :key="item.id">
            {{item.name | getWinter}}  
        </li>
       </ul>
    </ul>
 </div>
 <script>
    Vue.config.productionTip= false  //消除告警
    const vm=new Vue({
        el:'.root',
        data(){
           return {
            persons:[
                {id:'001',name:'马冬梅',age:18},
                {id:'002',name:'周冬雨',age:22},
                {id:'003',name:'周杰伦',age:21},
                {id:'004',name:'温兆伦',age:27},
            ],
            keyword:'',
            //results:[],
           }
        },
        //使用watch属性,watch监听的是发生变化的属性，这里变化的是keyword
       // watch: {
            //先使用简写进行操作,需要带上return否则返回的就是undefiend
            //简写存在的问题是：第一次数据不显示，需要使用完整写法
           /*  keyword(val){
                this.results=this.persons.filter(p=>p.name.indexOf(val)!==-1)
                return this.results
            } */
            /* keyword:{
                immediate:true,//第一次渲染列表,表示需要立即侦听
                handler(val){
                    this.results=this.persons.filter(p=> p.name.indexOf(val)!== -1)
                }
            } */
       // },
       //可以使用watch的，很多情况下可以使用computed进行替换
       computed: {
          //简写默认就是get方法
          /* results(){   
            return this.persons.filter(p=>p.name.indexOf(this.keyword)!== -1)          
          } */
          //完整写法，这里只要用简写就可，这里是为了巩固书写
          results:{
            get(){
                return this.persons.filter(p=>p.name.indexOf(this.keyword)!== -1)  
            },
            //没啥用
            set(val){
                console.log(val)
            }
          }
       },
       //过滤器 --->语法格式类似于Linux管道运算符,|前面的内容是输入内容 右侧的是过滤器
       filters:{
        //编写过滤条件。
            getWinter(username){
                return username.indexOf('冬')!==-1 ? username : ''
            },
       },
    })
 </script>
</body>
</html>